<template>
  <div class="layout">
    <div class="layout-top">
      <top-msg />
    </div>
    <div class="layout-auto">
      <div class="logoDiv">
        <el-row>
          <el-col :span="14"
            ><div class="">
              <img src="../assets/logo.png" alt="" /></div
          ></el-col>
          <el-col :span="10" v-if="$route.path == '/index'"
            ><div class="inputDiv">
              <el-input placeholder="请输入内容" v-model="input">
                <template slot="append" ><span @click="clickBtn" style="cursor: pointer;">全站搜索</span></template>
              </el-input>
            </div></el-col
          >
        </el-row>
      </div>
      <div>
        <el-menu
          :default-active="$route.path"
          class="el-menu-demo"
          mode="horizontal"
          router
        >
          <el-menu-item index="/index">首页</el-menu-item>
          <el-menu-item index="/qbzx">全部资讯</el-menu-item>
          <el-menu-item index="/zcfg">政策法规</el-menu-item>
          <el-menu-item index="/xxtb">信息通报</el-menu-item>
          <el-menu-item index="/zzdt">工作动态</el-menu-item>
          <el-menu-item index="/aqxc">安全宣传</el-menu-item>
          <el-menu-item index="/bszn">办事指南</el-menu-item>
        </el-menu>
      </div>
      <div>
        <router-view />
      </div>
    </div>
    <bottomMsg />
  </div>
</template>
<script>
import topMsg from "@/components/topMsg";
export default {
  components: {
    "top-msg": topMsg,
  },
  watch: {
    $route(to, from) {
      // 这里可以执行一些操作，例如：
      // console.log("Route changed from", from, "to", to);
    },
  },
  data() {
    return {
      input: "",
    };
  },
  methods:{
    clickBtn(){
     console.log("--0009") 
     this.$router.push('/search')
    }
  },
  mounted() {
    
    console.log(this.$route);
  },
};
</script>
<style scoped>
.layout {
  height: 100%;
  background-size: contain;
  background: url("../assets/bgc.jpg") no-repeat;
}
.layout-auto {
  width: 80%;
  margin: 0 auto;
}
.layout-top {
  height: 60px;
  line-height: 60px;
 
  background: rgba(249, 251, 253, 0.85);
}
.logoDiv {
  padding-top: 7%;
  padding-bottom: 0.9%;
}
.inputDiv {
  padding-right: 16px;
}
/deep/ .el-input {
  border: 8px solid rgba(0, 101, 255, 0.3);
  border-radius: 8px;
}
/deep/ .el-input__inner {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
}
/deep/ .el-input-group__append {
  background-color: #0065ff;
  border: 1px solid #0065ff;
  color: #fff;
  font-size: 18px;
  font-weight: 00;
  font-family: PingFangSC-Medium;
}
/* 导航默认样式 */
.el-menu.el-menu--horizontal {
  border: none;
  padding-left: 40px;
  background-color: #0065ff;
}
/* 导航默认样式 */
.el-menu--horizontal > .el-menu-item {
  color: #fff;
  padding: 0 2.1%;
  border-bottom: none;
  height: 60px;
  line-height: 60px;
  font-size: 16px;
  font-weight: 500;
  font-family: PingFangSC-Medium;
}
/* 导航被选中 */
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: #0058eb;
  border-bottom: none;
  /* opacity: 0.31;
  background-image: linear-gradient(180deg, rgba(0,39,154,0.31) 0%, #00279A 100%); */
  color: #fff;
}
/* 鼠标移入导航 */
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover {
  background-color: #0058eb;
  color: #fff !important;
  
}
.el-menu, .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus{
   background-color: #0058eb;
   color: #fff;
}
</style>